<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div th:insert="head.html"></div>
<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">

    <div class="container">

        <div class="row">
            <div class="col-md-12">
                <p style="background-color: cornflowerblue ; color: white; font-size: 30px">为你推荐</p>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 col-md-4" v-for="(goods,index) in pageData.records">
                <div class="thumbnail">
                    <img src="" alt="..." class="col-sm-6 col-md-6" style="width: 140px;height: 130px">
                    <div class="caption text-left">
                        <p>排名:<span v-text="index+1">N</span></p>
                        <p>品名:<span v-text="goods.productName">name</span></p>
                        <p>价格:<span v-text="goods.productPrice">price</span></p>
                        <p>
                            <a class="btn btn-primary" @click.prevent="toDetail(goods.id)">详情</a> &nbsp;&nbsp;&nbsp;&nbsp;
                            <a class="btn btn-success" @click.prevent="toCart(goods.id)">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>

<div th:insert="foot.html"></div>
<script>
    let goods = new Vue({
        el: "#app",
        data: {
            pageData:{
                current:1,
                size:3,
                total:-1,
                records:[],
                pages:-1
            }
        },
        methods: {
            initGoods(){
                
                $.get('/product/getPageList', data =>{
                    console.log(data)
                    this.pageData.current=data.current
                    this.pageData.size=data.size
                    this.pageData.total=data.total
                    this.pageData.records=data.records
                    this.pageData.pages=data.pages
                })
            },
            toDetail(id){
                console.log(id)
                sessionStorage.setItem("productId",id)
                $.get('/product/toDetail',{id:id}, data =>{
                    location.href = '/singleShopping.html'
                })
            },
            toCart(id){
                if (goodsTypeList.isLogin === ""){
                    alert("快去登录");
                    location.href='/login.html'
                }
                console.log(id)
                $.get('/cart/changeCart',{productId:id,count:1},data=>{
                    alert("宝贝已经加入购物车")
                })
            }
        },
        created() {
            this.initGoods()
        }
    })

</script>

</body>
</html>